如何基于微信小程序开发网约车应用 | 您所在的位置:网站首页 › 约单app怎么用 约单app的使用教程 › 如何基于微信小程序开发网约车应用 |
项目描述 为了解决长途如跨城市的出行撮合需求,满足乘客和司机双方自由定价的意愿,特开发一款非及时的打车应用。基本功能是出行用户登录小程序后,根据自己角色选择发布行程计划。行程计划包括出行时间和起始位置以及期望价格;如果是乘客,发布自己的出行计划之后跳转到乘客发布的出行计划列表页,乘客可以点击期望的行程计划,邀请司机接单;如果是司机,需要验证是否已经认证通过。如果没有认证通过则跳转到认证页面,否则跳转到乘客发布的出行计划列表页,选择期望的出行计划,完成接单。司机和乘客通过聊天页面协调出行计划。暂不支持支付功能,由双方线下完成交易。用流程图描述为: 系统原型 主要提供3个Tab页面:“首页”、“消息”和“我的”。其中“首页”聚焦行程发布、行程查看和聊天会话等核心功能。“消息”聚焦历史会话检索等功能,在首页进行的会话会跳转到该tab页面。“我的”聚焦车主认证、司机或者乘客查看历史行程记录以及客服服务等功能。原型图如下所示:
系统存储设计 根据业务,存储表主要有以下几种: driver:司机认证记录表,包括司机个人信息以及认证状态等 driver_route:司机发布的行程记录表 passager_route:乘客发布的行程记录表 bargin_route:成交的行程记录表 chat_partner:聊天的双方参与者 message:会话记录
存储表结构和各表之间的关系如下所示:
开发准备 a. 帐号申请 开发小程序的第一步需要注册一个小程序帐号,可能这一步是小程序开发最大的障碍,因为不管哪种帐号都需要认证,特别是企业类型帐号认证需要企业工商营业执照和组织机构代码证,如果小程序需要支付功能,还需要提供对公帐号。但是你也可以使用个人帐号类型,但是个人帐号具备的功能很有限,比如不能支持支付功能等。有关小程序的注册类型和认证的疑问可以参考小程序注册类型和认证( https://kf.qq.com/product/wx_xcx.html#hid=hot_faq )。注册小程序帐号之后,就可以得到一个appId和secret key,它们跟小程序应用相绑定的,在后续API调用中是不可缺少的。 b. 开发工具 同开发其他应用程序一样,微信团队同样也有自己的开发集成工具。有关如何注册和下载开发工具,可以参考官方文档:注册和下载开发工具 (https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html) 。下面简要介绍开发工具的常用功能:
从上面图中可以看到开发工具由以下几个区域组成: 功能预览区:代码编辑保存,开发工具会自动编译并生成预览,在该区域可以及时看到小程序渲染后的效果; 文件浏览区:也就是文件浏览器,树状图形式可以展开和收拢; 代码编辑区:提供代码阅读、搜索和编辑提示功能; 网络调试区:集成的是google开发工具组件,功能相信大家已经很熟悉。 最上面一排的按钮功能区,主要包括编译、代码上传和代码仓库版本管理以及云服务入口功能等。这里唯一需要普及的是小程序的代码构成。
c.小程序代码组成 一个小程序通常由一个描述整体程序的 app 和多个描述各自页面的 page页面模块组成。其中app主体部分由三个文件组成,必须放在项目的根目录,文件为: app.js: 控制小程序的全局业务逻辑; app.json:小程序的全局公共配置信息; app.wxml:小程序的全局公共样式, 每个页面模块由4钟类型的文件组成,放置一个目录里面,四种类型的文件为: .json 后缀的 JSON 配置文件:存放配置信息; .wxml 后缀的 WXML 模板文件:页面内容模板,支持变量的动态渲染; .wxss 后缀的 WXSS 样式文件:页面样式定义; .js 后缀的 JS 脚本逻辑文件:js实现的业务逻辑,是页面模块中最重要的文件。 比如我们项目的代码结构组成如下图所示:
更多信息可以参考文档:小程序目录结构 (https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html) 和代码构成 (https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html)
前端设计 我们先确定小程序的总体展现框架,在app.wxml圈定整体结构: 1{ 2 "cloud": true, 3 "pages": [ 4 "pages/home/home",//home tab页面 5 "pages/position/position",//定位服务页面 6 "pages/drivers/drivers",//司机和乘客发布的行程列表页面 7 "pages/myroutes/myroutes",//我的历史行程 8 "pages/messages/messages",//“message”tab页面 9 "pages/chat/chat",//聊天会话页面 10 "pages/detail/detail",//行程信息详情 11 "pages/certificate/certificate",//企业认证页面 12 "pages/enterprise/enterprise",// 13 "pages/mine/mine" //“我的”tab页面 14 ], 15 "window": { 16 "backgroundTextStyle": "light", 17 "navigationBarBackgroundColor": "#fff", 18 "navigationBarTitleText": "WeChat", 19 "navigationBarTextStyle": "black" 20 }, 21 "tabBar": { 22 "color": "#ccc", 23 "selectedColor": "#35495e", 24 "borderStyle": "white", 25 "backgroundColor": "#f9f9f9", 26 "list": [ 27 { 28 "text": "首页", 29 "pagePath": "pages/home/home", 30 "iconPath": "resources/icon_home.png", 31 "selectedIconPath": "resources/icon_home.png" 32 }, 33 { 34 "text": "消息", 35 "pagePath": "pages/messages/messages", 36 "iconPath": "resources/icon_cate.png", 37 "selectedIconPath": "resources/icon_home.png" 38 }, 39 { 40 "text": "我的", 41 "pagePath": "pages/mine/mine", 42 "iconPath": "resources/icon_member.png", 43 "selectedIconPath": "resources/icon_home.png" 44 } 45 ] 46 }, 47 "sitemapLocation": "sitemap.json" 48}其中"cloud": true表示我们接下来用到云服务,pages定义我们应用所有定义的页面模块路径,tabBar定义应用的展示框架,它是一个list结构,每个列表项目由tab名称、页面路径和图标路径组成。各个tab接下来详细介绍。
首页Tab 首页主要功能为司机和乘客发布行程计划,一旦行程计划发布就分别跳转到对应的列表页面。具体说就是,如果是乘客,则可以查看司机发布的出行列表信息,并可以邀请司机接单;如果是司机,则可以看到乘客的出行列表信息,并可以选择主动接单。我们将这一部分核心功能放在主页面内完成,因为无论是司机还是乘客都有共同的行为:发布行程信息,且基本项目一样,故可以复用该功能。
a.行程计划 行程计划页面是司机和乘客发布行程的主入口,主要展示行程发布的起始位置和价格等。我们定义一个模板:publishRoute.wxml,有关模板的更多信息可以参考模板 (https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a) 1 2 3 4 |
CopyRight 2018-2019 实验室设备网 版权所有 |